<template>
  <CommonTable
    ref="commonTable"
    :is-select="true"
    :columns="columns"
    :dataSource="dataSource"
    :total="dataSource.length"
    :isLoading="isLoading"
    @getPageParams="getPageParams"
    @get-table-sort="getTableSort"
    @getSelectColumn="getSelectColumn"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'operation'">
        <span>
          <i
            class="details"
            type="primary"
            @click="onView(column, text, record)"
            >查看详情</i
          >
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'image'">
        <a-image
          :width="30"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
        {{ record.address }}
      </template>
    </template>
  </CommonTable>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import CommonTable from "../../components/myTable/index.vue";
import { cloneDeep } from "lodash";
import { MailOutlined } from "@ant-design/icons-vue";

const columns = [
  {
    title: "用户ID",
    dataIndex: "name",
    key: "name",
    align: "center",
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: "游戏名称",
    width: 100,
    dataIndex: "age",
    align: "center",
    key: "age",
  },
  {
    title: "反馈时间",
    dataIndex: "address",
    align: "center",
    key: "tags",
    width: 100,
  },
  {
    title: "反馈类型",
    align: "center",
    dataIndex: "address",
    key: "2",
    width: 100,
  },
  {
    title: "问题描述",
    dataIndex: "image",
    align: "center",
    key: "3",
    width: 140,
  },
  {
    title: "反馈信息",
    align: "center",
    dataIndex: "address",
    key: "4",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "action",
    align: "center",
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
];

const dataSource = ref(
  Array.from({ length: 100 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ["cool", "teacher"],
  }))
);

const isLoading = ref(false);
const commonTable = ref(null);

const getPageParams = (start, length) => {
  console.log("分页数据：", start, length);
};

const getSelectColumn = (rows) => {
  console.log("选择的数据：", rows);
};

const getTableSort = (sorter) => {
  if (sorter.order) {
    console.log(
      sorter.order === "ascend" ? "升序" : "降序",
      "排序表头字段：",
      sorter.field
    );
  } else {
    console.log("默认顺序----");
  }
  console.log("排序数据：", sorter);
};

const onView = (item) => {
  console.log("View item:", item);
};

const onDelete = (key) => {
  dataSource.value = dataSource.value.filter((item) => item.key !== key);
};

const handleAdd = () => {
  const newData = {
    key: `${dataSource.value.length}`,
    name: `Edward King ${dataSource.value.length}`,
    age: 32,
    address: `London, Park Lane no. ${dataSource.value.length}`,
  };
  dataSource.value.push(newData);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
